<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="js/styleswitcher.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css" title="style" />
	<link rel="alternate stylesheet" type="text/css" href="css/style_noir.css"title="style_noir" />
	<title>musicMAP - Carte</title>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		google.load('visualization', '1', {packages: ['geomap']});

		function drawVisualization() {
                  <% if (request.getAttribute("nomgroupe") != null) { %>
                      var data = new google.visualization.DataTable();
                      <%
                      List<Integer> popularite = (List<Integer>)request.getAttribute("popularite");
                      List<String> listevillesOK = (List<String>)request.getAttribute("listevillesOK");
                      List<String[]> listeCoords = (List<String[]>)request.getAttribute("listeCoords");
                      int nb_villes = popularite.size();
                      %>

                      var options = {};
                      options['colors'] = [0xBFF3FE, 0x80E8FE, 0x00CAF9]; //couleurs bleues
                      options['width']=[1200];
                      options['height']=[600];
                      options['dataMode'] = 'markers';

                      data.addRows(<%= nb_villes %>);
                      data.addColumn('number', 'LATITUDE', 'Latitude');
                      data.addColumn('number', 'LONGITUDE', 'Longitude');
                      data.addColumn('number', 'Popularité', 'Value'); // Won't use this column, but still must define it.
                      data.addColumn('string', 'HOVER', 'HoverText');

                      var geomap = new google.visualization.GeoMap(document.getElementById('visualization'));

                      <%
                      for(int i=0; i < nb_villes ; ++i) {
                        //System.err.println(i);
                      %>
                          data.setValue(<%=i%>, 0, <%=listeCoords.get(i)[0]%>);
                          data.setValue(<%=i%>, 1, <%=listeCoords.get(i)[1]%>);
                          data.setValue(<%=i%>, 2, <%=popularite.get(i)%>);
                          data.setValue(<%=i%>, 3, '<%=listevillesOK.get(i)%>');

                      <% } %>
                    geomap.draw(data, options);

                    google.visualization.events.addListener(geomap, 'regionClick', function(e) {
                        bob = parseInt(e['region']);
                        if(!isNaN(bob)) {
                            alert(e['region']);
                        };
                    });
                    }

                    google.setOnLoadCallback(drawVisualization);
                <% } %>
  </script>

	<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
</head>
<body>
	<div id="content">
		<p id="top">Vous êtes loggé en tant que : Michel Plasse <a href="#" id="deconnexion">Déconnexion</a></p>
		<div id="logo">
			<h1><a href="index.html"></a></h1>
		</div>
		<ul id="navigation">
			<li><a href="index.jsp">Accueil</a></li>
			<li class="current"><a href="init.html?action=getPopularite">Maps</a></li>
			<li><a href="stats.html?action=getSemaines">Stats</a></li>
                        <li><a href="profil.jsp">Profil</a></li>
			<li><a href="contact.jsp">Contact</a></li>
		</ul>
		<div class="ligne"></div

                
		<div >
			<h1 class="titre" >Carte de la popularité de
                            <select id="choice" onChange='popularite()'>
                            <c:if test="${nomgroupe==null}"><option>votre groupe préféré</option></c:if>
                            <c:forEach items="${listeGroupes}" var="it" varStatus="st">
                                                <option value="${it}"
                                                        <c:if test="${it==nomgroupe}"> selected </c:if>>
                                                    <c:out value="${it}"/>
                                                </option>
                            </c:forEach>
 
                            </select>
                        </h1>
		</div>

                <div id="visualization"></div>

		<div id="pied">
                    <%@include file="inc/pied.html" %>
		</div>

                <script language="javascript">

                    function popularite() {
                        var selectElmt = document.getElementById('choice');
                        window.location.href = "init.html?action=getPopularite&nomgroupe=" + selectElmt.options[selectElmt.selectedIndex].value;
                    }
                </script>
</body>
</html>